<template>
  <div>
    <input type="text" v-model="firstName"> +
    <input type="text" v-model="lastName"> =
    <span>{{ fullName }}</span>
    <button @click="changeName">改名</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      firstName: '黑马',
      lastName: '牛逼'
    }
  },
  methods: {
    changeName() {
      this.fullName = '昆哥-第一'
    }
  },
  computed: {
    
    fullName: {
      get () {
        return this.firstName + '-' + this.lastName
      },
      set (value) {
        this.firstName = value.split('-')[0]
        this.lastName = value.split('-')[1]
      }
    }
  }
}
</script>

<style>

</style>
